<template>
  <div class="tables">
    <router-link tag="div" to="/recommend" class="tables-link">
      <span>
        推荐
      </span>
    </router-link>
    <router-link tag="div" to="/singer" class="tables-link">
      <span>
        歌手
      </span>
    </router-link>
    <router-link tag="div" to="/ranking" class="tables-link">
      <span>
        排行
      </span>
    </router-link>
    <router-link tag="div" to="/search" class="tables-link">
      <span>
        搜索
      </span>
    </router-link>
  </div>
</template>
<script>
export default {

}
</script>
<style lang="stylus" scoped>
  @import '~assets/stylus/variable.styl';
  .tables
    margin .3rem 0rem
    display flex
    justify-content space-around
    font-size $font-sise-xl
    .tables-link
      span
        font-size 15px
        display block
        color $color-text-i
        padding-bottom .2rem
    .router-link-active
      span
        color $color-text
        border-bottom 2px solid $color-text
</style>

